<template>
    <view class="nav" v-if="list && list.length > 0" :style="{ top: `${$tools.navbar_height() - 1}px` }">
        <scroll-view scroll-x class="nav text-center" scroll-with-animation :scroll-left="scrollLeft"
            :style="{ 'background-color': style_info.bg }">
            <view class="cu-item" :class="index == navCurr ? 'act-color' : ''" v-for="(item, index) in list"
                :style="{ 'color': index == navCurr ? style_info.act : style_info.font }" :key="index"
                @tap="(e) => navSelect(e, item)" :data-id="index">
                {{ item.name }}
                <view class="act-line" v-if="index == navCurr" :style="{ 'background-color': style_info.act }"></view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>


const emit = defineEmits(['update:modelValue', 'change']);

const props = defineProps({
    modelValue: { required: true },
    list: {
        type: Array,
        default: []
    },
    info: {
        type: Object,
        default: {}
    }
})

const style_info = computed(() => {
    let pdata = {
        bg: '#fff',
        font: '#000',
        act: '#c3293c'
    }
    if (props.info.id > 0) {
        let item = props.info
        pdata = {
            bg: item.bg_color,
            font: item.txt_color,
            act: item.act_color
        }
    }
    return pdata
})



const { list } = toRefs(props)

const data = reactive({
    scrollLeft: 0,
    navCurr: 0
})

const { navCurr, scrollLeft } = toRefs(data)

//监听数据
watch(
    () => props.modelValue,
    (value) => {
        data.navCurr = value
    },
    { immediate: true }
);


function navSelect(e, item) {

    data.navCurr = e.currentTarget.dataset.id;
    data.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    emit('update:modelValue', data.navCurr)
    emit('change', data.navCurr)

}

</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 9;
    // box-shadow: 2rpx 10rpx 20rpx #000;

    .cu-item {
        font-size: 26rpx;
        position: relative;
        color: #000;

        .act-line {
            width: 40rpx;
            height: 6rpx;
            border-radius: 6rpx;
            background-color: $main_color;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -20rpx;
            z-index: 3;
        }
    }

    .act-color {
        color: $main_color;
        font-weight: 500;
        font-size: 28rpx;
    }
}
</style>